<!--  -->
<template>
  <div class="container">
    <div class="box">
      <div class="title">{{ info.title }}</div>
      <a-divider />
      <!-- <div class="text" v-html="info.detail"></div> -->
      <div v-if="fileType === 'docx'" class="file_container" ref="file"></div>
      <pdf
        v-else-if="fileType === 'pdf'"
        v-for="i in numPages"
        :key="i"
        :page="i"
        :src="pdfUrl"
        style="width: 100%"
        ref="pdf"
      />
      <a-divider />
      <div
        class="file-list"
        v-if="info.notificationFileList && info.notificationFileList.length"
      >
        <div class="file-list-title">参考文件</div>
        <div
          class="file"
          v-for="item in info.notificationFileList"
          :key="item.id"
        >
          <!-- <a :href="item.url" :download="info.original">{{ item.original }}</a> -->
          <div
            @click="handleUpload(item)"
            style="color: #1890ff; cursor: pointer"
          >
            {{ item.original }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { messageDetail } from "@/api/message";
import axios from "axios";
const docx = require("docx-preview");
import pdf from "vue-pdf";
import { ossUrl } from '@/config'
export default {
  components: { pdf },
  data() {
    return {
      info: {},
      pdfUrl: "",
      fileType: "",
      numPages: null,
    };
  },
  mounted() {
    // console.log(this.$route.query);
    messageDetail(this.$route.query.id).then((res) => {
      this.info = res.data;
      const info = res.data.detail;
      console.log("info===", info);
      if (info && info.url) {
        if (info.original.split(".")[1] === "pdf") {
          this.fileType = "pdf";
          this.pdfUrl = pdf.createLoadingTask(info.url);
          this.pdfUrl.promise
            .then((pdf) => {
              this.numPages = pdf.numPages;
              console.log(this.numPages);
            })
            .catch((err) => {
              console.error("pdf 加载失败", err);
            });
        } else {
          this.fileType = "docx";
          axios({
            method: "get",
            responseType: "blob", // 设置响应文件格式
            url: info.url,
          }).then(({ data }) => {
            docx.renderAsync(data, this.$refs.file); // 渲染到页面预览
          });
        }
      }
    });
  },
  methods: {
    getFileUrl(item) {
      if (!item.url) {
        return ''
      }

      let url = item.url 
      if (item.bucketName) {
        url = ossUrl + url
      }
      return url
    },
    handleUpload(data) {
      let fileUrl = this.getFileUrl(data)
      axios
        .get(fileUrl, {
          responseType: "blob", // 注意返回数据类型
        })
        .then((res) => {
          const url = window.URL.createObjectURL(res.data);
          const linkElement = document.createElement("a"); // 创建点击下载的元素
          linkElement.setAttribute("href", url);
          linkElement.setAttribute("downLoad", data.original);
          linkElement.click();
        });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 3rem;
}
.box {
  .img {
    overflow: hidden;
    img {
      width: 100%;
      float: left;
    }
  }
  .file_container {
    max-height: 500px;
    overflow-y: scroll;
  }
  .title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-top: 24px;
  }
  .text {
    font-size: 14px;
    color: #444;
  }
  .file-list {
    .file-list-title {
      font-size: 18px;
      color: #333;
      margin-bottom: 12px;
    }
    .file {
      font-size: 14px;
      a {
        color: #1890ff;
      }
    }
  }
}
</style>